<template>
  <div class="main">
    <common-action :show-append="showAppend" :show-import="showImport"
                   :on-search="onSearch" :on-delete="onDelete" :on-export="onExport"/>
    <common-append :open-append="openAppend" :on-append="onAppend" :on-cancel="onCancel"
                   :on-finish-failed="onFinishFailed" :form-append="formAppend" :slot-append="slotAppend"
                   :validate-messages="validateMessages"/>
    <common-editor :open-editor="openEditor" :on-editor="onEditor" :on-cancel="onCancel"/>
    <common-import :open-import="openImport" :on-import="onImport" :on-cancel="onCancel"/>
    <common-table :data="dataSource" :columns="columns" :show-editor="showEditor" :on-delete="onDelete"/>
  </div>
</template>

<script setup lang="ts">
import CommonTable from "@/components/CommonTable.vue";
import CommonAction from "@/components/CommonAction.vue";
import CommonAppend from "@/components/CommonAppend.vue";
import CommonEditor from "@/components/CommonEditor.vue";
import CommonImport from "@/components/CommonImport.vue";
import {onBeforeMount, ref, reactive} from "vue";
import api from "@/api";

onBeforeMount(() => {
  api.menu.list_5().then(rs => {
    dataSource.value = rs.data;
  })
});
const dataSource = ref([]);
const columns = [
  {
    title: "ID",
    dataIndex: "id",
    key: "id",
  },
  {
    title: "名称",
    dataIndex: "label",
    key: "label",
  },
  {
    title: "图标",
    dataIndex: "icon",
    key: "icon",
  },
  {
    title: "路径",
    dataIndex: "route",
    key: "route",
  },
  {
    title: "组件",
    dataIndex: "component",
    key: "component",
  },
  {
    title: "创建时间",
    dataIndex: "createTime",
    key: "createTime",
  },
  {
    title: "更新时间",
    dataIndex: "updateTime",
    key: "updateTime",
  },
  {
    title: "状态",
    dataIndex: "state",
    key: "state",
  },
  {
    title: "操作",
    key: "action",
  },
];

function onSearch(value) {
  if (value === '') {
    api.menu.list_5().then(rs => {
      dataSource.value = rs.data;
    })
  } else {
    api.menu.detail_5({id: value}).then(rs => {
      dataSource.value = [rs.data];
    })
  }
}

const validateMessages = {
  required: '请填写${label}!',
  types: {
    email: '{label} 不是邮箱!',
    number: '${label} 不是数字!',
  },
  number: {
    range: '${label} 必须在 ${min} 和 ${max} 之间',
  },
};

function onCancel() {
  openAppend.value = false;
  openEditor.value = false;
  openImport.value = false;
}

const onFinishFailed = (errorInfo: any) => {
  console.log(errorInfo);
};

const openAppend = ref<boolean>(false);
const showAppend = () => {
  openAppend.value = true;
};

const formAppend = reactive({id: 0});
const slotAppend = reactive([
  {name: '编号', rules: [{required: true}], slot: 'id',},
  {name: '名称', rules: [{required: true}], slot: 'label',},
  {name: '图标', rules: [{required: true}], slot: 'icon',},
  {name: '路由', rules: [{required: true}], slot: 'route',},
  {name: '组件', rules: [{required: true}], slot: 'component',},
  {name: '状态', rules: [{required: true}], slot: 'state',},
])

function onAppend(values: any) {
  // api.menu.save_5().then(rs => {
  //   console.log(rs.data);
  // })
  console.log(values);
  openAppend.value = false;
}

function onDelete() {
  // api.menu.delete_5().then(rs => {
  //   console.log(rs.data);
  // })
  alert("onDelete");
}


const openEditor = ref<boolean>(false);
const showEditor = () => {
  openEditor.value = true;
};

function onEditor() {
  // api.menu.save_5().then(rs => {
  //   console.log(rs.data);
  // })
  openEditor.value = false;
}

const openImport = ref<boolean>(false);
const showImport = () => {
  openImport.value = true;
};

function onImport() {
  //
  openImport.value = false;
}

function onExport() {
  alert("onExport")
}
</script>